<template>
  <el-scrollbar class="fill">
    <el-menu
      class="el-menu-vertical-demo"
      :collapse="props.isCollapse"
      :router="true"
      :unique-opened="true"
      :default-active="$route.path.toLowerCase()"
    >
      <el-menu-item index="/">
        <el-icon><Menu-repeat /></el-icon>
        <template #title>
          <span>首页</span>
        </template>
      </el-menu-item>
      <el-sub-menu index="/org">
        <template #title>
          <el-icon><Orange /></el-icon>
          <span>组织架构</span>
        </template>
        <el-menu-item index="/org/department">
          <template #title>
            <span>部门</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/org/job">
          <template #title>
            <span>职位</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/org/user">
          <template #title>
            <span>用户</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="/right">
        <template #title>
          <el-icon><Lock /></el-icon>
          <span>权限管理</span>
        </template>
        <el-menu-item index="/right/right">
          <template #title>
            <span>权限</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/right/rightconfig">
          <template #title>
            <span>权限配置</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="/log">
        <template #title>
          <el-icon><Document /></el-icon>
          <span>日志管理</span>
        </template>
        <el-menu-item index="/log/login">
          <template #title>
            <span>登录日志</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/log/action">
          <template #title>
            <span>行为日志</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/log/error">
          <template #title>
            <span>错误日志</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>
          <el-icon><Coin /></el-icon>
          <span>后台管理</span>
        </template>
      </el-sub-menu>
    </el-menu>
  </el-scrollbar>
</template>

<script setup lang="ts">
import { defineProps, PropType } from 'vue';

interface Menu {
  title: string;
  icon: string;
  path: string;
  children?: Menu[];
}
const props = defineProps({
  isCollapse: Boolean,
  menus: {
    type: Array as PropType<Menu[]>,
    required: true,
  },
});
</script>

<style scoped lang="scss">
.fill {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 20vw;
  min-height: 400px;
}
</style>
